<template>
	<view class="page">
		<view class="row">
			<view class="title">
				姓名
			</view>
			<view class="select">
				<input type="text" value="" placeholder="请填写姓名" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row no-border">
			<view class="title">
				性别
			</view>
			<view class="select">
				<radio-group name="gender" @change="genderRadioChange">
					<label v-for="(item,index) in gender" :key="item.value">
						<radio color="#E5422D" :value="item.value" :checked="index === current" />
						{{item.name}}
					</label>
				</radio-group>
			</view>
		</view>
		<view class="row">
			<view class="title">
				民族
			</view>
			<view class="select">
				<input type="text" value="" placeholder="请填写民族" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row">
			<view class="title">
				高考年份
			</view>
			<view class="select">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input" v-if="index == -1">请选择高考年份</view>
					<view class="uni-input" v-else>{{array[index]}}</view>
					<view class="iconfont iconxxjtfull"></view>
				</picker>
			</view>
		</view>
		<view class="row">
			<view class="title">
				高考省份
			</view>
			<view class="select">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input" v-if="index == -1">请选科高考省份</view>
					<view class="uni-input" v-else>{{array[index]}}</view>
					<view class="iconfont iconxxjtfull"></view>
				</picker>
			</view>
		</view>
		<view class="row">
			<view class="title">
				手机号
			</view>
			<view class="select">
				<input type="number" value="" placeholder="请填写手机号" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="type">
			<view class="title">
				考生类型
			</view>
			<helang-checkbox ref="checkbox" @change="valueChange"></helang-checkbox>
		</view>
		
		<view class="btn" @click.stop="nextStep">
			下一步
		</view>


	</view>
</template>

<script>
	import helangCheckbox from "@/components/helang-checkbox/helang-checkbox.vue"
	export default {
		components: {
			"helang-checkbox": helangCheckbox
		},
		data() {
			return {
				current: 0,
				gender: [{
						value: '1',
						name: '男',
						checked: 'true'
					},
					{
						value: '2',
						name: '女'
					}
				],
				// select模拟数据
				index: -1,
				array: ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04'],
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.checkbox.set({
					//这里填写插件所需参数
					type: 'radio', // 类型：单选框
					index: 0, // 默认选中的项
					column: 2, // 分列
					list: [ // 列表数据
						{
							text: '普通理科'
						},
						{
							text: '普通文科'
						},
						{
							text: '普通理科'
						},
						{
							text: '普通文科'
						}
					]
				})
			})
		},
		methods: {
			nextStep(){
				uni.navigateTo({
					url:'../baokaofanganB/baokaofanganB'
				})
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			genderRadioChange(evt) {
				for (let i = 0; i < this.gender.length; i++) {
					if (this.gender[i].value === evt.target.value) {
						this.current = i;
						console.log('gender',this.gender[i].value)
						break;
					}
				}
			},
			valueChange() {
				let that = this;
				/* 获取 已选项的值 */
				let data = that.$refs.checkbox.get(); // 组件返回的数据
				console.log(data);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'baokaofanganA.scss';
	@import '../../common/icon/iconfont.css';
</style>
